<template>
  <div class="cover-weixin-h5">
    <!-- 2.35:1比例（推荐尺寸900×383px）用于文章推送/被推荐的展示 -->
    <!-- 1:1比例（推荐尺寸383×383px），公众号主页、用户转发文章至朋友圈或聊天时显示 -->
    <div class="cover-preview">
      <div class="cover-preview-content" ref="contentRef">
        <div class="preview-content-evenly" v-if="imageType == 1">
          <div class="phone-item" v-for="item in list" :key="item">
            <img v-if="item.phoneImgUrl" class="phone-img" :src="item.phoneImgUrl" />
          </div>
        </div>

        <div class="preview-content-evenly" v-else-if="imageType == 2">
          <div class="wall-item is-shadow" v-for="item in list" :key="item">
            <img
              v-if="item.imgUrl"
              :class="['item-img', item.isWHCan ? 'is-height' : 'is-width']"
              :src="item.imgUrl"
            />
          </div>
        </div>

        <div class="preview-content-evenly" v-else-if="imageType == 4">
          <div class="avatar-item is-shadow" v-for="item in list" :key="item">
            <img
              v-if="item.imgUrl"
              :class="['item-img', item.isWHCan ? 'is-height' : 'is-width']"
              :src="item.imgUrl"
            />
          </div>
        </div>

        <div class="preview-content-center" v-else-if="imageType == 5">
          <div class="grid-item" v-for="item in list" :key="item">
            <img
              v-if="item.imgUrl"
              :class="['item-img', item.isWHCan ? 'is-height' : 'is-width', item.isWHCan]"
              :src="item.imgUrl"
            />
          </div>
        </div>

        <div class="preview-content-center" v-else>暂无</div>
      </div>
    </div>

    <div class="footer">
      <el-button @click="modalStore.closeModal()">取消</el-button>
      <el-button type="primary" @click="handleDown" :loading="loading">下载图片</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import html2canvas from 'html2canvas';
import { ElMessage } from 'element-plus';

import { useGlobalStore } from '@/pinia/modules/global';
const globalStore = useGlobalStore();

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },

  imageType: {
    type: [Number, String],
    default: '',
  },

  groupList: {
    type: Array,
    default: () => [],
  },
});

const loading = ref(false);

const contentRef = ref();

const handleDown = async () => {
  await nextTick(); // 确保 DOM 更新完成

  const element = contentRef.value;
  if (!element) {
    console.error('元素未找到');
    return;
  }

  const scale = 2560 / element.offsetWidth;

  console.log(element.offsetWidth, element.offsetHeight, scale, Math.ceil(scale), 'element');

  try {
    loading.value = true;
    const canvas = await html2canvas(element, {
      useCORS: true, // 启用跨域支持
      allowTaint: true, // 允许污染画布
      scale: Math.ceil(scale),
    });

    const item = props.groupList.find((v) => v.value == props.imageType);

    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = `微信公众号封面_${item.label}_${Date.now()}.png`;
    link.click();
    loading.value = false;
    ElMessage.success('下载成功');
  } catch (error) {
    console.error('截图失败:', error);
    loading.value = false;
    ElMessage.error('截图失败');
  }
};
</script>

<style lang="scss" scoped>
.cover-weixin-h5 {
  width: 100%;
}

.generate-cover {
  height: 100%;
}

.cover-preview {
  // border-top: 1px solid #dddddd;
  // border-bottom: 1px solid #dddddd;
  // margin: 16px 0;

  .cover-preview-content {
    width: 100%;
    // padding: 16px 0;
    box-sizing: border-box;
  }

  .preview-content-defaul {
    width: 100%;
    aspect-ratio: 2.35/1;
    overflow: hidden;
    // padding: 18px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
  }

  .preview-content-evenly {
    width: 100%;
    aspect-ratio: 2.35/1;
    overflow: hidden;
    padding: 12px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: transparent;
  }

  .preview-content-center {
    width: 100%;
    aspect-ratio: 2.35/1;
    overflow: hidden;
    // padding: 18px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }

  .phone-item {
    max-height: 100%;
    aspect-ratio: 9/16;
  }

  .phone-img {
    width: 100%;
    height: 100%;
  }

  .item-img {
    z-index: 99;

    &.is-width {
      max-width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    &.is-height {
      max-height: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .wall-item,
  .avatar-item,
  .grid-item {
    // max-width: 100%;
    // max-height: 100%;
    position: relative;

    width: 100%;
    height: 100%;
    margin: 0 5px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;

    &.is-shadow {
      box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 6px;
    }

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .wall-item {
    aspect-ratio: 16/9;
    height: auto;
    & > img {
      width: 100%;
      height: auto;
    }
  }

  .avatar-item {
    height: auto;
    & > img {
      width: 100%;
      height: auto;
    }
  }

  .grid-item {
    margin: 0 4px;
    border-radius: 0;

    &:first-child {
      border-radius: 8px 0 0 8px;
    }

    &:last-child {
      border-radius: 0 8px 8px 0;
    }
  }
}

.footer {
  text-align: center;
  margin-top: 12px;
}
</style>

<style lang="scss"></style>
